<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOSS直聘 - 简历编辑</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        body {
            background-color: #f0f5f5;
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background-color: #202329;
            color: white;
            padding: 0.5rem 2rem;
        }
        
        .boss-logo {
            color: #00b38a;
            font-weight: bold;
            font-size: 1.5rem;
        }
        
        .nav-item {
            margin: 0 0.5rem;
        }
        
        .nav-link {
            color: #fff !important;
            font-size: 0.9rem;
        }
        
        /* 主要内容区域 */
        .main-container {
            padding: 20px;
            display: flex;
        }
        
        /* 左侧导航 */
        .left-nav {
            width: 180px;
            background-color: white;
            border-radius: 5px;
            padding: 15px 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .left-nav-title {
            padding: 10px 20px;
            font-size: 16px;
            color: #333;
        }
        
        .nav-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .nav-menu li {
            padding: 10px 20px;
            cursor: pointer;
            color: #666;
        }
        
        .nav-menu li:hover, .nav-menu li.active {
            background-color: #f9f9f9;
            color: #00b38a;
        }
        
        /* 中间内容区 */
        .content-area {
            flex: 1;
            margin: 0 20px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .top-tabs {
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .tab-link {
            color: #666;
            margin-right: 20px;
            text-decoration: none;
            padding: 5px 0;
        }
        
        .tab-link.active {
            color: #00b38a;
            border-bottom: 2px solid #00b38a;
        }
        
        .resume-score {
            background-color: #f5f7fa;
            border-radius: 5px;
            padding: 15px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .score-avatar {
            width: 40px;
            height: 40px;
            background-color: #00a8e0;
            border-radius: 50%;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .score-info {
            flex-grow: 1;
        }
        
        .score-text {
            color: #666;
            display: flex;
            align-items: center;
        }
        
        .score-value {
            color: #00b38a;
            font-size: 24px;
            font-weight: bold;
            margin: 0 5px;
        }
        
        .score-tip {
            color: #999;
            margin-left: 10px;
            font-size: 12px;
        }
        
        /* 表单区域 */
        .form-section-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 15px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            color: #666;
            margin-bottom: 8px;
        }
        
        .form-control {
            border: 1px solid #ddd;
            border-radius: 3px;
            padding: 10px;
            width: 100%;
        }
        
        .gender-options {
            display: flex;
        }
        
        .gender-option {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            border: 1px solid #ddd;
            cursor: pointer;
            color: #666;
        }
        
        .gender-option.selected {
            background-color: #f0fbf8;
            border-color: #00b38a;
            color: #00b38a;
        }
        
        .gender-option:first-child {
            border-radius: 3px 0 0 3px;
        }
        
        .gender-option:last-child {
            border-radius: 0 3px 3px 0;
        }
        
        .select-control {
            appearance: none;
            background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M4 6h8l-4 5z'/%3E%3C/svg%3E") no-repeat right 10px center;
            padding-right: 30px;
        }
        
        .action-buttons {
            text-align: right;
            margin-top: 20px;
        }
        
        .btn-cancel {
            background-color: #fff;
            border: 1px solid #ddd;
            color: #666;
            padding: 8px 20px;
            border-radius: 3px;
            margin-right: 10px;
        }
        
        .btn-submit {
            background-color: #00b38a;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 3px;
        }
        
        /* 右侧区域 */
        .right-sidebar {
            width: 250px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 15px;
        }
        
        .sidebar-section {
            margin-bottom: 20px;
        }
        
        .sidebar-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: #333;
            font-size: 15px;
        }
        
        .add-button {
            color: #999;
        }
        
        .file-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .file-icon {
            width: 40px;
            height: 40px;
            background-color: #f56c6c;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 10px;
        }
        
        .file-info {
            flex-grow: 1;
        }
        
        .file-name {
            color: #333;
            font-size: 14px;
        }
        
        .file-meta {
            color: #999;
            font-size: 12px;
            margin-top: 3px;
        }
        
        .file-actions {
            color: #999;
        }
        
        .ai-resume {
            background-color: #f0f5ff;
            border-radius: 5px;
            padding: 15px;
        }
        
        .ai-title {
            color: #2468f2;
            font-size: 16px;
            margin-bottom: 10px;
        }
        
        .ai-features {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .ai-features li {
            color: #333;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        
        .ai-features li:before {
            content: "•";
            color: #2468f2;
            margin-right: 8px;
        }
        
        .privacy-settings {
            margin-top: 30px;
        }
        
        .setting-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            color: #666;
        }
        
        .setting-value {
            color: #999;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <a class="navbar-brand boss-logo" href="#">BOSS 直聘</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">推荐</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">搜索·公司</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">校园·海归</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">APP</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">有了</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">海外</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">无障碍专区</a>
                </li>
            </ul>
            <div class="d-flex align-items-center">
                <div class="mr-3">
                    <i class="fa fa-bell"></i> 消息 <span class="badge badge-danger">2</span>
                </div>
                <div class="mr-3">简历</div>
                <div>夏宁 <img src="https://via.placeholder.com/30" class="rounded-circle ml-2"></div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-container">
        <!-- 左侧导航 -->
        <div class="left-nav">
            <div class="left-nav-title">简历目录</div>
            <ul class="nav-menu">
                <li class="active">个人信息</li>
                <li>个人优势</li>
                <li>期望职位</li>
                <li>工作经历</li>
                <li>项目经历</li>
                <li>教育经历</li>
                <li>专业技能</li>
                <li>自定义添加</li>
                <li>资格证书</li>
                <li>志愿者经历</li>
            </ul>
        </div>

        <!-- 中间内容区 -->
        <div class="content-area">
            <div class="top-tabs">
                <a href="#" class="tab-link active">我的在线简历</a>
                <a href="#" class="tab-link">预览</a>
                <a href="#" class="tab-link">导入已有简历</a>
                <a href="#" class="tab-link">导出为附件简历</a>
            </div>

            <div class="resume-score">
                <div class="score-avatar">
                    <i class="fa fa-user"></i>
                </div>
                <div class="score-info">
                    <div class="score-text">
                        简历专业评分 <span class="score-value">92</span> 分
                    </div>
                    <div class="score-tip">
                        3个待优化项 <i class="fa fa-info-circle"></i>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <div class="form-section-title">编辑个人信息</div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">姓名</label>
                            <input type="text" class="form-control" value="夏宁">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">当前求职状态</label>
                            <select class="form-control select-control">
                                <option>离职-随时到岗</option>
                                <option selected>离职-随时到岗</option>
                                <option>在职-月内到岗</option>
                                <option>在职-考虑机会</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">性别</label>
                            <div class="gender-options">
                                <div class="gender-option selected">男</div>
                                <div class="gender-option">女</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">我的牛人身份</label>
                            <select class="form-control select-control">
                                <option>职场人</option>
                                <option selected>职场人</option>
                                <option>应届生</option>
                                <option>实习生</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">出生年月</label>
                            <input type="text" class="form-control" value="1995-06">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">电话</label>
                            <input type="text" class="form-control" value="180*****43">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">参加工作时间</label>
                            <input type="text" class="form-control" value="2017-03">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">微信号 (选填)</label>
                            <input type="text" class="form-control" value="180*****43">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">邮箱 (选填)</label>
                            <input type="text" class="form-control" value="104****77@qq.com">
                        </div>
                    </div>
                </div>

                <div class="action-buttons">
                    <button class="btn-cancel">取消</button>
                    <button class="btn-submit">完成</button>
                </div>
            </div>
        </div>

        <!-- 右侧区域 -->
        <div class="right-sidebar">
            <div class="sidebar-section">
                <div class="sidebar-title">
                    <span>附件管理</span>
                    <span class="add-button">+</span>
                </div>
                <div>
                    <div class="file-count">文件 (1/3)</div>
                    <div class="file-item">
                        <div class="file-icon">
                            <i class="fa fa-file-pdf-o"></i>
                        </div>
                        <div class="file-info">
                            <div class="file-name">夏宁简历.pdf</div>
                            <div class="file-meta">157.1KB 更新于 2025.02.21 09:50</div>
                        </div>
                        <div class="file-actions">
                            <i class="fa fa-ellipsis-v"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ai-resume">
                <div class="ai-title">AI 智能简历生成</div>
                <ul class="ai-features">
                    <li>量身定制</li>
                    <li>智能推荐</li>
                    <li>精美模板</li>
                </ul>
                <div style="text-align: center; margin-top: 15px;">
                    <img src="https://via.placeholder.com/150" style="width: 150px;">
                </div>
            </div>

            <div class="privacy-settings">
                <div class="sidebar-title">
                    <span>隐私设置</span>
                    <span class="setting-action">设置</span>
                </div>
                <div class="setting-list">
                    <div class="setting-item">
                        <span>简历设置：</span>
                        <span class="setting-value">对外开放</span>
                    </div>
                    <div class="setting-item">
                        <span>屏蔽公司：</span>
                        <span class="setting-value">已屏蔽2个</span>
                    </div>
                </div>

                <div class="sidebar-title mt-4">
                    <span>道具</span>
                    <span class="setting-action">查看更多 ></span>
                </div>
                <div class="setting-list">
                    <div class="setting-item">
                        <span>VIP兑换</span>
                    </div>
                    <div class="input-group mt-2">
                        <input type="text" class="form-control" placeholder="输入道具/VIP兑换码">
                        <div class="input-group-append">
                            <button class="btn btn-info" type="button">兑换</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>